<script setup>
import { storeToRefs } from "pinia";
import { ref } from "vue";
import { useGlobalStore } from "@/stores/golbal";
import ssSwiper from "@/components/ss-swiper.vue";
const { homeSwiperList, newsList } = storeToRefs(useGlobalStore());

const getImgUrl = (name) => {
  return new URL(`/src/assets/productPicture/${name}`, import.meta.url).href;
};
</script>
<template>
  <div class="home-page-comp">
    <!-- 热销产品 -->
    <div class="home-page-comp-container">
      <!-- 热销产品 -->
      <div class="home-page-comp-hot">
        <div class="home-page-comp-hot-title">热销产品</div>
        <!-- 轮播图 -->
        <ss-swiper></ss-swiper>
        <!-- <div class="home-page-comp-hot-swiper">
          <div class="home-page-comp-hot-swiper-item">
            <img src="" alt="" class="home-page-comp-hot-swiper-item-img" />
            <div class="home-page-comp-hot-swiper-item-text"></div>
          </div>
        </div> -->
      </div>

      <!-- 平台新闻 -->
      <div class="home-page-comp-news">
        <div class="home-page-comp-news-title">平台新闻</div>
        <div class="home-page-comp-news-list">
          <img
            v-for="item in newsList"
            :src="getImgUrl(item.image)"
            alt=""
            class="home-page-comp-news-img"
          />
        </div>
      </div>
    </div>
    <!-- 演示一下函数用法可以删除 -->
    <!-- <img :src="getImgUrl(newsList[0].image)" alt=""> -->
  </div>
</template>
<style scoped>
.home-page-comp {
  /* 中间缺空格会失效，qiu */
  width: calc(100vw - 110px);
  height: calc(100vh - 103px);
}

.home-page-comp-container {
  margin: 0 auto;
  width: 1400px;
  height: 100%;
  /* background-color: aquamarine; */
  padding-top: 3.5%;
}
.home-page-comp-hot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* background-color: aqua; */
}
.home-page-comp-hot-title {
  font-size: var(--szc-font-main-big);
  color: #fff;
  font-weight: 700;
  /* margin-bottom: 10%; */
}
.home-page-comp-news {
  width: 100%;
  height: 52%;
}
.home-page-comp-news-title {
  font-size: var(--szc-font-main-big-x);
  color: #fff;
  font-weight: 700;
  margin-bottom: 1%;
}
.home-page-comp-news-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* 启用水平滚动条 */
  white-space: nowrap; /* 避免换行 */
  border-radius: 60px 60px 0 0;
}
.home-page-comp-news-img {
  width: 100%;
  margin-bottom: 20px; /* 子项之间的间距 */
  object-fit: contain; /* 保持图片比例 */
  border-radius: 60px 60px 0 0;
}
.home-page-comp-news-img:last-child {
  margin-bottom: 0; /* 最后一个子项没有间距 */
}
.home-page-comp-news-list::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
 
.home-page-comp-news-list {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
